<template>
  <div class="item" v-for="(item, index) in itemList" :key="item.name">
    <div>{{ item.name }}</div>
    <div>{{ item.price }}</div>
    <div>
      <button @click="subCount(index)">-</button>
      <span>{{ item.count }}</span>
      <button @click="addCount(index)">+</button>
    </div>
  </div>
</template>

<script setup>
import { useItemInfoStore } from '@/store/iteminfo.js'

const itemInfoStore = useItemInfoStore()

const itemList = itemInfoStore.orderInfo.itemList


const subCount = (index) => {
  itemInfoStore.subCount(index)
}
const addCount = (index) => {
  itemInfoStore.addCount(index)
}
</script>

<style scoped>
.item {
  display: flex;
  flex-direction: row;
}
</style>